<template>
    <div class="course-info">
        <!-- course-info -->
        <div class="info section">
            <span class="info-tag">{{courseInfo.charge ? '实战课程' : '免费课程'}}</span>
            <h1 class="info-title">{{courseInfo.title}}</h1>
            <img class="info-img" :src="courseInfo.thumb" alt mode />
        </div>
        <section class="line"></section>
        <!-- introduction -->
        <div class="introduction section">
            <label class="section-label">简介</label>
            <div class="introduction-line">
                <div class="info-time">上线时间： {{courseInfo.published_format}}</div>
                <div class="info-view">观看：{{viewNum || 0}}</div>
            </div>

            <wxParse :content="courseInfo.description" :imageProp="imageProp" />
        </div>
        <section class="line"></section>
        <!-- video list -->
        <div class="video-list section">
            <label class="section-label">视屏</label>
            <ul class="list-container">
                <video-list
                    v-for="(item, index) in courseVideoList"
                    :key="index"
                    :index="index"
                    :item="item"
                    @goVideo="goVideo"
                ></video-list>
            </ul>
        </div>
        <section class="line"></section>
        <!-- comments list -->
        <div class="comments-list section">
            <label class="section-label">评论</label>
            <label class="section-submit" for @click="goComment('', true)">留言</label>
            <comments-list :commentsList="courseCommentsList" @goComment="goComment"></comments-list>
        </div>
    </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";
import wxParse from "mpvue-wxparse";
import videoList from "@/components/video-list";
import commentsList from "@/components/comments-list";

export default {
    components: {
        card,
        wxParse,
        videoList,
        commentsList
    },

    data() {
        return {
            courseId: "",
            courseInfo: "",
            courseVideoList: [],
            courseCommentsList: [],
            imageProp: {
                mode: "widthFix"
            }
        };
    },
    computed: {
        viewNum() {
            let r = 0;
            this.courseVideoList.forEach(e => {
                r = r + e.view_num;
            });
            return r;
        }
    },
    methods: {
        init() {
            this._getCourseInfo({}, this.courseId);
            this._getVideosList({}, this.courseId);
            this._getCourseComments({}, this.courseId);
        },
        // 跳转至视屏页
        goVideo(video) {
            wx.navigateTo({
                url: `../video/main?id=${
                    video.id
                }&courseVideoList=${JSON.stringify(this.courseVideoList)}`
            });
        },
        // 跳转至评论
        goComment(item, redirect) {
            if (item) wx.setStorageSync("curCourseComent", item);
            wx.navigateTo({
                url: `../comment/main?id=${this.courseId}&type=course`
            });
        },
        // 课程详情
        _getCourseInfo(data, id) {
            this.$http.course.getCourseInfo(data, id).then(res => {
                this.courseInfo = res.data;
                this.courseInfo.published_format = formatTime(
                    res.data.published_at,
                    true
                );
                console.log("this.courseInfo", this.courseInfo);
            });
        },
        // 课程下的视频列表
        _getVideosList(data, id, merge) {
            this.$http.course.getVideosList(data, id).then(res => {
                if (merge) {
                    this.courseVideoList = this.courseVideoList.concat(
                        res.data
                    );
                } else {
                    this.courseVideoList = res.data;
                }
            });
        },
        // 课程评论
        _getCourseComments(data, id, merge) {
            this.$http.course.getCourseComments(data, id).then(res => {
                res.data.forEach(e => {
                    e.created_format = formatTime(e.created_at, true);
                });
                if (merge) {
                    this.courseCommentsList = this.courseCommentsList.concat(
                        res.data
                    );
                } else {
                    this.courseCommentsList = res.data;
                }
            });
        }
    },
    onShow() {
        this.courseId = this.$mp.query.id;
        this.init();
    },
    onHide() {
        this.courseId = null;
    },
    onUnload() {
        this.courseId = null;
    }
};
</script>

<style lang="less">
@import url("~mpvue-wxparse/src/wxParse.css");
.line {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: @bg-color;
}
.course-info {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    background-color: #fff;
    .section {
        position: relative;
        padding: 40rpx 40rpx 20rpx;
        box-sizing: border-box;
        &-label {
            font-size: 16px;
            color: #1a1a1a;
            line-height: 2;
        }
    }
    .info {
        &-tag {
            position: relative;
            top: 0;
            left: 0;
            display: inline-block;
            font-size: 12px;
            color: #fff;
            background-color: red;
            border-radius: 50px;
            padding: 3px 10px;
            box-sizing: border-box;
        }
        &-title {
            font-size: 18px;
            padding: 10rpx 0;
        }
        &-img {
            width: 100%;
            height: 360rpx;
            border-radius: 10rpx;
            box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.1);
            margin: 10rpx 0;
        }
    }
    /*
  * introduction 简介
  */
    .introduction {
        &-text {
            font-size: 12px;
            color: @font-color-gray;
        }
        &-line {
            font-size: 12px;
            color: @font-color-gray;
            display: flex;
            justify-content: space-between;
            .info-time,
            .info-view {
                flex: 0 0 auto;
            }
        }
    }
    /*
  * video list 
  */
    .video-list {
        .list-container {
            padding: 0 0 0 10px;
            position: relative;
        }
    }
    /*
  * comments list 
  */
    .comments-list {
        .section-submit {
            float: right;
            background-color: #e54d42;
            color: #fff;
            transform: translate(1rpx, 1rpx);
            border-radius: 5000rpx;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 0 30rpx;
            font-size: 28rpx;
            height: 64rpx;
            line-height: 1;
            text-align: center;
            text-decoration: none;
            overflow: visible;
            margin-left: initial;
            transform: translate(0rpx, 0rpx);
            margin-right: initial;
        }
    }
}
</style>
